<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表过滤</title>
    <script src="../js/vue.js"></script>
    <style>
        th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>

<div id="app">
    <h1>{{msg}}</h1>
    <input type="text" placeholder="请输入搜素关键字" v-model="keyword">
    <table>
        <tr>
            <th>序号</th>
            <th>英雄</th>
            <th>能量值</th>
            <th>选择</th>
        </tr>
        <tr v-for="(hero,index) in filteredHeros" :key="hero.id">
            <td>{{index+1}}</td>
            <td>{{hero.name}}</td>
            <td>{{hero.power}}</td>
            <td><input type="checkbox"></td>
        </tr>
    </table>
</div>


<script>

    const vm = new Vue({
        el: '#app',
        data: {
            keyword: '',
            msg: '列表过滤',
            heros: [
                {id: '101', name: '艾格夫', power: 1000},
                {id: '102', name: '麦迪文', power: 6000},
                {id: '103', name: '吉尔丹', power: 8000},
                {id: '104', name: '萨尔', power: 6000}
            ],
            filteredHeros: []
        },
        watch: {
            // 监视器，执行过滤规则
            /* keyword(val){
                 // console.log(newValue,oldValue)
                 this.filteredHeros = this.heros.filter((hero)=>{
                     return hero.name.indexOf(val) >= 0
                 })
             }*/

            // 简写，
            keyword: {
                immediate: true,
                // console.log(newValue,oldValue)
                handler(val) {
                    this.filteredHeros = this.heros.filter((hero) => {
                        return hero.name.indexOf(val) >= 0
                    })
                }

            }
        }


    })

    // 回顾filter
    let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
    // filter 不会破坏原数组的结构，会生成一个全新的数组。
    let newArr = arr.filter((num) => {
        // return 过滤规则
        return num > 5
    })

    console.log(newArr)


</script>
</body>
</html>